<template>
  <div class="app-container">
    <el-card class="filter-container">
      <div>
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <div class="filter-btn">
          <el-button
            icon="el-icon-search"
            type="primary"
            size="small"
            @click="handleSearchList()"
          >
            查询
          </el-button>
          <el-button
            icon="el-icon-setting"
            size="small"
            @click="handleResetSearch()"
          >
            重置
          </el-button>
          <el-button
            class="btn-add"
            type="success"
            size="mini"
            icon="el-icon-plus"
            @click="add"
          >
            添加
          </el-button>
        </div>

      </div>
      <div style="margin-top: 25px">
        <el-form :inline="true" :model="listQuery" size="small">
          <el-row>

            <el-col :sm="12" :lg="6">
              <el-form-item label="名称：">
                <el-input v-model="listQuery.name" placeholder="名称" />
              </el-form-item>
            </el-col>

            <el-col :sm="12" :lg="6">
              <el-form-item label="状态：">
                <el-select v-model="listQuery.status" placeholder="全部" clearable>
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>

        </el-form>
      </div>
    </el-card>

    <el-card class="table-container">
      <el-table
        v-loading="listLoading"
        element-loading-text="加载中"
        :data="list"
        fit
      >
        <el-table-column align="center" width="200" property="name" label="名称" />
        <el-table-column align="center" width="200" property="value" label="值域" />

        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusTypeFilter">{{ scope.row.status | statusTextFilter }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" label="描述" property="description" />

        <el-table-column label="操作" align="center" class-name="operate-cell">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status === 0"
              size="mini"
              type="warning"
              @click="enable(scope.row)"
            >启用
            </el-button>
            <el-button
              v-else
              size="mini"
              type="warning"
              @click="disable(scope.row)"
            >禁用
            </el-button>

            <el-divider direction="vertical" />

            <el-button
              size="mini"
              type="danger"
              @click="remove(scope.row)"
            >删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :title="isAdd ? '新增字典值域' : '编辑字典值域'"
      :visible.sync="editOperFormVisible"
      center
      width="30%"
    >
      <el-form
        ref="editOperForm"
        :rules="editOperFormRules"
        :model="editOperForm"
      >
        <el-form-item label="名称：" prop="name">
          <el-input
            v-model="editOperForm.name"
            placeholder="名称"
          />
        </el-form-item>
        <el-form-item label="值：" prop="value">
          <el-input
            v-model="editOperForm.value"
            placeholder="value"
          />
        </el-form-item>
        <el-form-item label="排序：" prop="sort">
          <el-input-number v-model="editOperForm.sort" :min="1" />
        </el-form-item>

        <el-form-item label="描述：">
          <el-input
            v-model="editOperForm.description"
            placeholder="描述"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editOperFormVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handleEditFormSubmit">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import {
  getList,
  create,
  updateById,
  removeById,
  updateStatus
} from '@/api/system/dict-data'

const defaultListQuery = {
  pageNum: 1,
  pageLimit: 10,
  sorts: '-sort'
}

const defaultEditForm = {
  sort: 1
}

const statusMap = {
  1: {
    type: 'success',
    text: '启用'
  },
  0: {
    type: 'warning',
    text: '禁用'
  }
}

export default {
  filters: {
    statusTypeFilter(status) {
      return statusMap[status].type
    },
    statusTextFilter(status) {
      return statusMap[status].text
    }
  },
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: [],
      total: 0,

      statusOptions: [{
        value: 1,
        label: '启用'
      }, {
        value: 0,
        label: '禁用'
      }],

      listLoading: true,
      loading: false,

      isAdd: false,
      editOperFormVisible: false,
      editOperForm: {},
      editOperFormRules: {
        name: [{ required: true, trigger: 'blur', message: '请填写角色名' }]
      }
    }
  },
  created() {
    const typeId = this.$route.query.typeId

    if (!typeId) {
      this.$router.push({
        path: '/system/dict/type'
      })
      return
    }
    this.typeId = typeId

    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true

      const listQuery = this.listQuery
      listQuery.dictTypeId = this.typeId

      getList(listQuery).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
    handleSearchList() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery)
    },
    enable(row) {
      this.$confirm('是否要启用值域?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateStatus(row.id, 1)
      })
    },
    disable(row) {
      this.$confirm('是否要禁用值域?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateStatus(row.id, 0)
      })
    },
    updateStatus(id, status) {
      updateStatus(id, status).then(response => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
        this.getList()
      })
    },
    add() {
      this.isAdd = true
      this.editOperForm = Object.assign({}, defaultEditForm)
      this.editOperFormVisible = true
    },
    update(row) {
      this.isAdd = false
      this.editOperForm = Object.assign({}, row)
      this.editOperFormVisible = true
    },
    handleEditFormSubmit() {
      this.$refs.editOperForm.validate(valid => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const params = Object.assign({}, this.editOperForm)

            if (this.isAdd) {
              create(params).then(_ => {
                this.$message.success('新建字典值域成功！')
                this.editOperFormVisible = false
                this.getList()
              })
            } else {
              updateById(params.id, params).then(_ => {
                this.$message.success('修改字典值域成功！')
                this.editOperFormVisible = false
                this.getList()
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    remove(row) {
      this.$confirm('是否要删除字典类型?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeById(row.id).then(_ => {
          this.getList()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
